<template>
	<view>
		<view class="header">
			<!-- <view class="title">个人中心</view> -->
			<view class="header-box">
				<view class="head">
					
					<view class="head-logo-box" ref="box">
						<view class="head-logo" @tap="denglu"></view>
						<view class="head-name-box">
							<view class="head-name">
								HI,{{nickName}}
							</view>
							<view class="head-tips">
								<view class="tips">理财达人</view>
								<view class="tips" @tap="shiming">{{$store.state.identity?"已实名":"未实名"}}></view>
							</view>
						</view>
					</view>
					
					<view class="jifenbox">
						<view class="jifen-item">
							<view class="num">0</view>
							<view class="miaosu">我的积分</view>
						</view>
						
						<view class="jifen-item">
							<view class="num">0</view>
							<view class="miaosu">我的账单</view>
						</view>
						
						<view class="jifen-item">
							<view class="num">{{youhui}}</view>
							<view class="miaosu">权益包</view>
						</view>
						
						<view class="jifen-item">
							<view class="num">0</view>
							<view class="miaosu">银行卡</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="main-head">
				<view class="zican">
					<text>我的资产</text><image class="yanjing" src="../../static/my/yanjing.png"></image>
				</view>
				<view class="zhanghu">
					<text>账户保障可升级 ></text>
				</view>
			</view>
			
			<view class="zongzican">
				<view class="zongzican-item1 item1" @tap="jump">
					<view class="leixing">总资产</view>
					<view class="jine">0.00</view>
					<view class="shouyi">昨日收益0.00</view>
				</view>
				<view class="zongzican-item1">
					<view class="leixing">总待还</view>
					<view class="jine">0.00</view>
					<view class="shouyi">暂无待还款项</view>
				</view>
			</view>
			
			<view class="foot">
				<view class="foot-box">
					<view class="foot-item1 baitiao">
						白条额度
					</view>
					<view class="foot-item2">
						充话费减20
					</view>
				</view>
				
				<view class="foot-box">
					<view class="foot-item1">
						可借现金
					</view>
					<view class="foot-item2">
						最高20万
					</view>
				</view>
				
				<view class="foot-box">
					<view class="foot-item1">
						我的保险
					</view>
					<view class="foot-item2">
						0项
					</view>
				</view>
				
				<view class="foot-box">
					<view class="foot-item1">
						我的账单
					</view>
					<view class="foot-item2">
						暂无交易
					</view>
				</view>
				
				
			</view>
		</view>
		
		<view class="quanyi">
			<view class="zhuanshu">专属权益</view>
		</view>
		<view class="quanyi-list">
			<view class="quanyi-list-item">
				<view class="list-imagebox">
					<image src="../../static/my/licai.png" class="list-image quanyibox"></image>
				</view>
				<view class="list-name">
					理财体验金
				</view>
			</view>
			
			<view class="quanyi-list-item">
				<view class="list-imagebox">
					<image src="../../static/my/yiliao.png" class="list-image"></image>
				</view>
				<view class="list-name">
					医疗急救卡
				</view>
			</view>
			
			<view class="quanyi-list-item">
				<view class="list-imagebox">
					<image src="../../static/my/youjiang.png" class="list-image youjiangbox"></image>
				</view>
				<view class="list-name">
					天天有奖
				</view>
			</view>
			
			<view class="quanyi-list-item">
				<view class="list-imagebox">
					<image src="../../static/my/kefu.png" class="list-image"></image>
				</view>
				<view class="list-name">
					我的客服
				</view>
			</view>
		</view>
		
		<view class="server">
			<view class="myserver">我的服务</view>
		</view>
		
		<view class="server-list">
			<view class="server-item" @tap="shiming">
				<view >
					<image src="../../static/my/shiming.png" class="server-item-image"></image>
					<text class="server-text">实名认证</text>
				</view>
				<view class="dayu">
					<!-- <image src="../../static/my/jiantou1.png"  class="jiantou-image"></image> -->
					>
				</view>
			</view>
			
			<view class="server-item">
				<view>
					<image src="../../static/my/anquan.png" class="server-item-image"></image>
					<text class="server-text">安全服务</text>
				</view>
				<view class="dayu">
					<!-- <image src="../../static/my/jiantou1.png"  class="jiantou-image"></image> -->
					>
				</view>
			</view>
			
			<view class="server-item">
				<view>
					<image src="../../static/my/xinyong.png" class="server-item-image"></image>
					<text class="server-text">信用评分</text>
				</view>
				<view class="dayu">
					<!-- <image src="../../static/my/jiantou1.png"  class="jiantou-image"></image> -->
					>
				</view>
			</view>
			
			<view class="server-item">
				<view>
					<image src="../../static/my/yinsi.png" class="server-item-image"></image>
					<text class="server-text">隐私设置</text>
				</view>
				<view class="dayu">
					<!-- <image src="../../static/my/jiantou1.png"  class="jiantou-image"></image> -->
					>
				</view>
			</view>
			
			<view class="server-item">
				<view>
					<image src="../../static/my/fuzu.png" class="server-item-image"></image>
					<text class="server-text">辅助功能</text>
				</view>
				<view class="dayu">
					<!-- <image src="../../static/my/jiantou1.png"  class="jiantou-image"></image> -->
					>
				</view>
			</view>
			
			<view class="server-item">
				<view>
					<image src="../../static/my/bangzu.png" class="server-item-image"></image>
					<text class="server-text">帮助反馈</text>
				</view>
				<view class="dayu">
					<!-- <image src="../../static/my/jiantou1.png"  class="jiantou-image"></image> -->
					>
				</view>
			</view>
			
			<view class="server-item">
				<view>
					<image src="../../static/my/guanyu.png" class="server-item-image"></image>
					<text class="server-text">关于</text>
				</view>
				<view class="dayu">
					<!-- <image src="../../static/my/jiantou1.png"  class="jiantou-image"></image> -->
					>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			username:"1",
			nickName:null,
			youhui:0
			}
		},
		methods: {
			jump(){
				uni.navigateTo({
					url:'../myAssets/myAssets'
				})
			},
		denglu() {
            uni.reLaunch({
                url: "/pages/denglu/denglu",
            });
            uni.showToast({
                title: "退出成功",
                duration: 2000,
            });
        },
        shiming(){
			
            uni.navigateTo({
                url:'../wealth/funds/identity/identity'
            })
        }
		
		},
		onLoad(){
			//获取用户名称
			uni.request({
				url:'http://dev.woniulab.com:7689/member/info',
				method:"POST",
				data:{
					username:this.$store.state.username
				},
				success:res=>{
					if(res.data.code==200){
						this.nickName=res.data.data.nickName
					}
				}
			})
			//获取用户优惠券
			uni.request({
				url:'http://dev.woniulab.com:7689/sys/membercoupon/selectCouponByUsername',
				method:"POST",
				data:this.$store.state.userInfo,
				success:res=>{
					if(res.data.code==200){
						this.youhui=res.data.data.length;
					}
				}
			});
		}
	}
</script>

<style scoped>
	.header {
		background-color: #007AFF;
		width: 750rpx;
		height: 320rpx;
		border-bottom-right-radius: 50rpx;
	}
	.head{
		position: relative;
	}
	.head::after{
		content: "签到";
		font-size: 28rpx;
		width: 130rpx;
		height: 45rpx;
		line-height: 45rpx;
		box-sizing: border-box;
		padding-left: 18rpx;
		text-align: center;
		background-image: url(../../static/my/qian.png);
		background-repeat: no-repeat;
		background-position: 18rpx 12rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		color: #f85656;
		background-color: #ffc364;
		position: absolute;
		right: 0rpx;
		top:15rpx;
	}
	.title {
		width: 750rpx;
		text-align: center;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 30rpx;
	}
	.head-logo-box{
		display: flex;
		width: 700rpx;
		margin:  0 auto;
	}
	.head-logo {
		width: 84rpx;
		height: 84rpx;
		background-image: url(../../static/my/logo.png);
		background-size: cover;
		margin-right: 20rpx;
	}
	.head-name-box{
		height: 84rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.head-name{
		color: #FFFFFF;
	}
	.head-tips{
		display: flex;
		color: #FFFFFF;
	}
	.tips{
		width: 114rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 22rpx;
		text-align: center;
		border: 2rpx solid #FFFFFF;
		border-radius: 50rpx;
		margin-right: 10rpx;
	}
	.jifenbox{
		width: 700rpx;
		margin: 40rpx auto;
		display: flex;
		justify-content: space-between;
	}
	.jifen-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 130rpx;
		height: 90rpx;
		justify-content: space-between;
	}
	.num{
		color: #FFFFFF;
		
	}
	.miaosu{
		color: #FFFFFF;
		font-size: 28rpx;
	}
	
	.main{
		width: 700rpx;
		height: 450rpx;
		margin: 0 auto;
		overflow: hidden;
		box-sizing: border-box;
		border: 2rpx solid #f3f3f3;
		background-color: #FFFFFF;
		position: relative;
		z-index: 2;
		top:-50rpx;
		border-radius: 30rpx;
	}
	.main-head{
		margin: 15rpx  0; 
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
	}
	.zican{
		font-size: 32rpx;
		color: #333333;
		
	}
	.yanjing{
		width: 34rpx;
		height: 22rpx;
		margin-left: 10rpx;
	}
	.zhanghu{
		font-size: 24rpx;
		color: #E2BC7F;
	}
	.zongzican{
		width: 100%;
		height: 220rpx;
		display: flex;
	}
	.zongzican-item1{
		flex-grow: 1;
		border-top: 2rpx solid #f4f4f4;
		border-bottom: 2rpx solid #f4f4f4;
		box-sizing: border-box;
		padding: 30rpx;
	}
	.item1{
		border-right: 2rpx solid #f4f4f4;
	}
	.leixing{
		font-size: 24rpx;
		color: #333333;
	}
	.jine{
		margin-top: 14rpx;
		margin-bottom: 30rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
	}
	.shouyi{
		font-size: 24rpx;
		color: #999999;
	}
	.foot{
		width: 95%;
		height: 150rpx;
		display: flex;
		margin: 0 auto;
	}
	.foot-box{
		height: 100%;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.foot-item1{

		font-size: 24rpx;
		color: #333333;
		margin-bottom: 12rpx;
	}
	.foot-item2{	
		font-size: 24rpx;
		color: #999999;
	}
	.baitiao{
		position: relative;
	}
	.baitiao::after{
		content: "领额度";
		width: 70rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-image: url(../../static/my/qipao.png);
		background-size: cover;
		/* background-repeat: no-repeat; */
		font-size: 18rpx;
		color: #FFFFFF;
		position: absolute;
		top:-20rpx;
		right: 20rpx;
	}
	.quanyi{
		height: 38rpx;
		width: 700rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		padding: 0 10rpx;
		/* background-color: #CCCCCC; */
		border-left: 10rpx solid #007AFF;
	}
	.quanyi-list{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 700rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		height: 200rpx;
		border-radius: 10rpx;
		border: 2rpx solid #F3F3F3;
		box-shadow: 0rpx 0rpx 20rpx 0rpx #F3F3F3;
	}
	.quanyi-list-item{
		flex-grow: 1;
		height: 130rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.quanyibox::after{
		content: "福利";
		width: 70rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-image: url(../../static/my/qipao.png);
		background-size: cover;
		/* background-repeat: no-repeat; */
		font-size: 18rpx;
		color: #FFFFFF;
		position: absolute;
		top:-20rpx;
		right: 0rpx;
	}
	.youjiangbox::after{
		content: "限时";
		width: 70rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-image: url(../../static/my/qipao.png);
		background-size: cover;
		/* background-repeat: no-repeat; */
		font-size: 18rpx;
		color: #FFFFFF;
		position: absolute;
		top:-20rpx;
		right: 0rpx;
	}
	.zhuanshu{
		font-size: 28rpx;
	}
	.list-image{
		width: 84rpx;
		height: 84rpx;
	}
	.list-name{
		font-size: 24rpx;
		color: #666666;
	}
	.server{
		height: 38rpx;
		width: 700rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		padding: 0 10rpx;
		/* background-color: #CCCCCC; */
		border-left: 10rpx solid #007AFF;
	}
	.myserver{
		font-size: 28rpx;
	}
	.server-list{
		width: 700rpx;
		height: 630rpx;
		/* background-color: #007AFF; */
		margin: 0 auto;
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		border: 2rpx solid #F3F3F3;
		box-shadow: 0rpx 0rpx 20rpx 0rpx #F3F3F3;
	}
	.server-text{
		color: #999999;
	}
	.server-item{
		box-sizing: border-box;
		padding: 0 30rpx;
		flex-grow: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #f9f9f9;
	}
	.server-item-image{
		width: 25rpx;
		height: 25rpx;
		margin-right: 20rpx;
	}
	.dayu{
		color: #CCCCCC;
	}
	.jiantou-image{
		width: 15rpx;
		height: 26rpx;
		
	}
</style>
